<template>
  <div >
    <Navbar></Navbar>
    <div id="setup">
      <span class="name">用户名</span>
      <br>
      <input type="text" disabled v-model="data.data.username">
      <br>
      <span class="narrow">用户名无法修改</span>
      <br>
      <span class="name">昵称</span>
      <br>
      <input type="text" v-model="data.data.nickname">
      <br>
      <span class="name">邮箱</span>
      <br>
      <input type="text" v-model="data.data.email">
      <br>
      <span class="name">个人主页</span>
      <br>
      <input type="text" v-model="data.data.homepage">
      <br>
      <span class="name">微博</span>
      <br>
      <input type="text" v-model="data.data.weibo">
      <br>
      <span class="narrow">请填写微博地址（格式为:http://weibo.com/mihuwa）</span>
      <br>
      <span class="name">一句话介绍</span>
      <br>
      <textarea id="introduce" v-model="data.data.jieshao"></textarea>
      <br>
      <a @click="updata" class="yangshi">更新设置</a>
    </div>
    <br>
    <div id="img">
      <span class="name">头像</span>
      <br>
      <img src="http://cdn.mihuwa.com/default-avatar-100x100.png" alt="">
      <br>
      <label for="fileavatar" ref="filetab">选择文件</label>
      <input 
          type="file" 
          id="fileavatar"
          @change="avatar"
          accept="image/jpeg,image/png,image/gif"
      >
      <br>
      <span>http://127.0.0.1:3000'+(userMessage.avatar?userMessage.avatar:'/images/avatar/mr.jpg')" alt="" slot="c" @click="meshow=true"</span>
      <button @click="avatarClick" >选择文件</button>
    </div>
  </div>
</template>

<script>
  import Navbar from "../components/Navbar.vue";
  import {mapState} from "vuex";
  export default {
    components: { Navbar },
    data: function () {
      return {
        
        
      }
    },
    mounted: function(){
      this.$store.dispatch("updata")
      
    },
    methods: {
      updata() {
        var data = {
          nickname: this.data.data.nickname,
          email: this.data.data.email,
          homepage: this.data.data.homepage,
          weibo: this.data.data.weibo,
          jieshao: this.data.data.jieshao,
          
        }
        this.$store.dispatch("tianjia", data);
      },
      avatar(e){
        this.files = e.target.files[0];
        var url =URL.createObjectURL(e.target.files[0]);
        this.$refs.filetab.style["background-image"]="url("+url+")"
        this.$refs.filetab.textContent="";
        this.isbtn =false;
      },
      avatarClick(){
            // console.dir(this.files)
        this.$store.dispatch("avatarimg",this.files)
      },
    },
    computed:{
      ...mapState([
        "data",
      ])
    }
  }

</script>

<style scoped>
  #setup {
    padding-top: 15px;
    padding-left: 10px;
  }

  #img{
    padding-left: 10px;
  }
  .narrow {
    font-size: 8px;
    color: #9e9e9e;
    display: inline-block;
    margin: 8px 0;
  }

  input {
    width: 90%;
    height: 30px;
  }

  .name {
    display: inline-block;
    margin-bottom: 8px;
  }

  #introduce {
    width: 90%;
    height: 117px;
  }

  .yangshi{
    display: inline-block;
    width: 80px;
    height: 35px;
    background-color:#E24C7C;
    color: white;
    border-radius: 3px;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
  }
  img{
    border-radius: 50%;
  }
  #fileavatar{
    border: 1px solid black;
  }
</style>